<script setup>
import { ref, onMounted } from 'vue'

const textForm = ref(null)

onMounted(() => {
    testForm.addEventListener('formdata', (e) => {
        e.formData.append('autor', 'hcxowe')
        console.log('formdata event')
    })

    testForm.addEventListener('submit', (e) => {
        console.log('submit start')

        e.preventDefault()

        console.log('get FormData start')

        const formData = new FormData(e.target)

        console.log('get FormData end')

        for (const entry of formData.keys()) {
            console.log(entry)
        }
    })
})


const onRequestSubmitClick = () => {
    textForm.value.requestSubmit()
}

const onSubmitClick = () => {
    textForm.value.submit()
}
</script>

<template>
    <div class="auto-wrapper">
        <div>input的name属性设置为email之后，输入框获取焦点自动展示邮件列表。设置属性autocomplete="off"阻止该行为</div>
        <form id="testForm" ref="textForm" style="display: flex; flex-direction: column; gap: 8px;">
            <div>邮箱：<input name="email" /></div>
            <div>邮箱（不提示列表）：<input name="email" autocomplete="off"/></div>
            <div>密码：<input type="password" name="password" autocomplete="new-password" /></div>
            <div>目录：<input type="file" name="files" webkitdirectory directory /></div>
            <button type="submit">type=submit的按钮点击会触发submit事件</button>
        </form>

        <div>
            <el-button type="primary" @click="onRequestSubmitClick">form.requestSubmit()会触发submit事件</el-button>
            <el-button type="primary" @click="onSubmitClick">form.submit()不会触发submit事件</el-button>
        </div>

        <div>form.submit()会触发formdata事件，但不会触发submit事件。<br>form.requestSubmit()与sumbit按钮点击会触发submit事件，在事件中获取FormData会触发formdata事件。</div>
    </div>
</template>

<style scoped>
.auto-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 10px;
    overflow: auto;
}
</style>